 <!-- <template>
  <div>
    <ul v-if="cooData.length > 0">
      <li v-for="(entry, index) in cooData" :key="index">
        <p>Time: {{ entry.year }}-{{ entry.month }}-{{ entry.day }} {{ entry.hour }}:{{ entry.minute }}</p>
        <ul>
          <li v-for="(cooEntry, cooIndex) in entry.coo" :key="cooIndex">
            <p>
              Row: {{ cooEntry[0] }}, Col: {{ cooEntry[1] }}, Value: {{ cooEntry[2] }}
            </p>
            <p>
              Latitude: {{ convertIndexToCoordinates(cooEntry[0], cooEntry[1]).lat }}
            </p>
            <p>
              Longitude: {{ convertIndexToCoordinates(cooEntry[0], cooEntry[1]).lon }}
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <p v-else>No COO data available.</p>
  </div>
</template>

<script>
import { ref, onMounted, provide } from 'vue';
import { getrecognitionData } from '../api/user/recognition.js';

export default {
  name: 'diamondList',

  data() {
    return {
      cooData: [], // 从后端获取的 COO 数据
      StartLat: 27.0,
      StartLon: 108.5,
      XReso: 0.009999999776482582,
      YReso: 0.009999999776482582
    };
  },
  mounted() {
    this.fetchCOOData();
  },
  methods: {
    async fetchCOOData() {
      try {
        const params = {
          year: 2023,
          month: 8,
          day: 1,
          hour: 1,
          minute: 24
        };
        this.cooData = await getrecognitionData(params); // 使用接口文件中的函数获取数据
      } catch (error) {
        console.error('Error fetching COO data:', error);
      }
    },
    convertIndexToCoordinates(row, col) {
      const lon = this.StartLon + col * this.XReso;
      const lat = this.StartLat - row * this.YReso;
      return { lat, lon };
    }
  }
};
</script>

<style>
/* 可以添加自定义样式 */
</style>     -->
<!-- 
<template>
  <div>
    <h1>QPE数据列表</h1>
    <ul>
      <li v-for="diamond in qpeData" :key="diamond.id">
        <div>ID: {{ diamond.id }}</div>
        <div>文件名: {{ diamond.filename }}</div>
        <div>年份: {{ diamond.year }}</div>
        <div>月份: {{ diamond.month }}</div>
        <div>天: {{ diamond.day }}</div>
        <div>小时: {{ diamond.hour }}</div>
        <div>分钟: {{ diamond.minute }}</div>
        <div>坐标数据:</div>
        <ul>
          <li v-for="(triplet, index) in diamond.coo" :key="index">
            [{{ triplet[0] }}, {{ triplet[1] }}, {{ triplet[2] }}]
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { getQPEData } from '../api/user/qpe.js';

export default {
  data() {
    return {
      qpeData: [],
    };
  },
  mounted() {
    this.fetchQPEData();
  },
  methods: {
    async fetchQPEData() {
      try {
        // 调用API函数获取数据
        const params = {
          // 添加需要的参数，如果有的话
        };

        const data = await getQPEData(params);

        // 更新数据列表
        this.qpeData = data;
      } catch (error) {
        console.error('获取数据时出错：', error);
        // 处理错误情况
      }
    },
  },
};
</script>

<style scoped>
/* 添加样式以美化列表的外观 */
</style> -->



<template>
  <div>
    <h1>Recognition Data</h1>
    <div v-if="loading">Loading data...</div>
    <div v-else>
      <div v-if="error">{{ error }}</div>
      <div v-else>
        <ul>
          <li v-for="item in recognitionData" :key="item.id">
            <h2>Record ID: {{ item.id }}</h2>
            <p>Filename: {{ item.filename }}</p>
            <p>Year: {{ item.year }}</p>
            <p>Month: {{ item.month }}</p>
            <p>Day: {{ item.day }}</p>
            <p>Hour: {{ item.hour }}</p>
            <p>Minute: {{ item.minute }}</p>
            <p>Coordinates:</p>
            <ul>
              <li v-for="(coordinate, index) in item.coo" :key="index">
                [{{ coordinate[0] }}, {{ coordinate[1] }}, {{ coordinate[2] }}]
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>



<script>
import { getrecognitionData } from '../api/user/recognition.js'; // 导入你的API函数

export default {
  data() {
    return {
      recognitionData: null,
      loading: true,
      error: null,
    };
  },
  async mounted() {
    try {
      // 使用你的API函数获取数据
      this.recognitionData = await getrecognitionData(/* 传递查询参数 */);
      this.loading = false;
    } catch (error) {
      this.error = 'Error fetching data: ' + error.message;
      this.loading = false;
    }
  },
};
</script>

